@filigran/chatbot 3.15.1 → 3.16.0

package/CHANGELOG.md

@@ -8,7 +8,44 @@ the versions follow [semantic versioning](https://semver.org/spec/v2.0.0.html).
 This file starts at 3.10.0; earlier releases are on the
 [releases page](https://github.com/FiligranHQ/filigran-ui/releases).
 
-## 3.15.1 — unreleased
+## 3.16.0 — unreleased
+
+### Added
+
+- `theme`: the host's colours, type and shapes (surfaces, menus, subtle and
+  hover fills, text fields, text, secondary and muted text, borders, a user's message, an
+  answer's text size, code), set as `--filigran-chat-*` variables on the panel
+  root. Every entry left out keeps the panel's own look, light and dark, so a
+  host that sets nothing sees the same panel (#460).
+
+### Fixed
+
+- In dark mode, the hover and focus colours an element carries show as they do
+  in light mode (an accent border on hover, the composer's focus border); its
+  dark colour used to hide them (#460).
+
+## 3.15.2 — 2026-10-28
+
+### Fixed
+
+- The thread keeps the end of the conversation in view when what an answer
+  carries takes its height after the answer rendered (an image, a chart, a file
+  card): it used to stop short of it (#460).
+- A message sent while the agent writes its answer shows above that answer,
+  where the backend stores it, instead of below it with the rest of the answer
+  streaming in above; the same for a message of another tab relayed during a
+  relayed answer (#460).
+- A turn whose stream drops is awaited for as long as the event stream takes
+  to reopen (a backend restart), showing "Reconnecting…", instead of being
+  marked stopped 15 s after the drop; an `error` or `cancelled` of the event
+  stream naming it ends it at once, and one that ended out of sight is
+  answered or stopped as the history read back says (#460).
+- A stream its server keeps alive (comments at a keep-alive cadence) that then
+  falls silent for 45 s is taken for dropped, so a stream a proxy left
+  half-open is handed over instead of hanging, when the event stream can pick
+  its turn up (#460).
+
+## 3.15.1 — 2026-10-27
 
 ### Fixed
 

package/README.md

@@ -121,6 +121,7 @@ import { ChatPanel } from '@filigran/chatbot';
 | `waitingMessages`   | `string[]`                                | built-in     | The waiting panel's rotating messages, already translated |
 | `renderWaitingPanel` | `() => React.ReactNode`                  | —            | Replaces the waiting panel's content (its messages and the invitation to play) |
 | `fontFamily`        | `string`                                  | —            | Font of the panel's text |
+| `theme`             | `ChatPanelTheme`                          | —            | The host's colours, type and shapes; see [Custom Theme](#custom-theme) |
 | `agentMentions`     | `boolean`                                 | `false`      | `@` also mentions agents of the agent list; the message carries their ids as `mentioned_agent_ids` |
 | `steerAttachments`  | `boolean`                                 | `false`      | Uploaded files may steer the running turn (the steer route takes `file_ids`) |
 | `onReady`           | `() => void`                              | —            | Called once, when the panel has chosen its agent and read back the conversation on screen; handle calls made earlier wait for it and then run in order |
@@ -1058,8 +1059,18 @@ never relay a panel's own turn back to it; frames naming the `turn_id` of the
 panel's own turn are dropped too. When the panel's own stream drops mid-turn,
 or ends without the turn's last frame (`done`, `error`, `session_expired` or
 `cancelled`), it takes a new id and picks the turn up from the event stream,
-keeping the segments it closed (or reads the history back when nothing comes
-within 15 s). A read-back that waited for a turn to end joins the thread in
+keeping the segments it closed. It shows "Reconnecting…" for as long as the
+event stream takes to reopen (a backend restarting, up to 15 minutes), then
+waits 5 s for the snapshot to replay the turn; an `error` or `cancelled` of
+the event stream naming that turn ends it as a relayed turn's end would, and
+with nothing in time the turn ended out of sight, answered or stopped as the
+history read back says. When the event stream cannot open (no conversation
+to follow yet) or answers an error other than a gateway's (502, 503, 504),
+the turn is not awaited that long. A stream whose `: keepalive` comments came
+at a keep-alive cadence and that then sends nothing for 45 s (a proxy that left
+it half-open) is taken for dropped the same way, when the event stream can
+pick its turn up; a backend without one keeps a silent stream open, as before. A message sent while a turn writes its answer shows above that
+answer, where the backend stores it. A read-back that waited for a turn to end joins the thread in
 place: each stored message missing from the screen goes after the one stored
 before it, so nothing lands above messages it follows.
 
@@ -1201,6 +1212,44 @@ import { MyLogo } from './icons';
 />
 ```
 
+### Custom Theme
+
+`theme` gives the panel the host's design system. Each entry is a CSS value
+and sets the `--filigran-chat-*` variable named beside it on the panel root,
+where everything the panel renders (its dialogs and menus included) reads it;
+an entry left out keeps the panel's own look, light and dark. A host's own
+variables (`var(--x)`) follow its light and dark modes, so one value serves
+both. The same variables may be set in CSS on an ancestor instead.
+
+| Entry              | Variable                            | Styles |
+| ------------------ | ----------------------------------- | ------ |
+| `surface`          | `--filigran-chat-surface`           | The background inline and fullscreen |
+| `surfaceRaised`    | `--filigran-chat-surface-raised`    | The background as a sidebar or floating card, and of its dialogs and menus |
+| `surfaceSubtle`    | `--filigran-chat-surface-subtle`    | Cards, search boxes, a table's or a code block's header |
+| `surfaceHover`     | `--filigran-chat-surface-hover`     | A row or a button under the pointer |
+| `inputSurface`     | `--filigran-chat-input-surface`     | A text field: the composer (no fill unless set), a rename field, the feedback and approval comments |
+| `headerBackground` | `--filigran-chat-header-background` | The header's background, a colour or an image (`none` for the surface alone) |
+| `text`             | `--filigran-chat-text`              | Text |
+| `textMuted`        | `--filigran-chat-text-muted`        | Times, labels, hints and placeholders |
+| `textSecondary`    | `--filigran-chat-text-secondary`    | Table cells, chips, descriptions, notices |
+| `border`           | `--filigran-chat-border`            | Dividers, outlines, a gauge's track and the loading skeleton |
+| `textSize`         | `--filigran-chat-text-size`         | An answer's prose, its headings in proportion, and a user's message unless `userTextSize` |
+| `userBackground`, `userText`, `userRadius`, `userPadding`, `userTextSize` | `--filigran-chat-user-*` | A user's message |
+| `fontMono`, `codeSize`, `codeSurface` | `--filigran-chat-font-mono`, `-code-size`, `-code-surface` | Code, in a block or inline |
+
+```tsx
+<ChatPanel
+  theme={{
+    surface: 'var(--page-background)',
+    text: 'var(--text-primary)',
+    userBackground: 'color-mix(in oklab, var(--accent) 10%, transparent)',
+    userText: 'var(--text-primary)',
+    textSize: '1rem',
+  }}
+  // ...
+/>
+```
+
 ### Custom Prompt Suggestions
 
 ```tsx

package/dist/index.d.ts

@@ -374,6 +374,44 @@ interface ChatContextBreakdown {
     /** Output of tool calls still held verbatim in the context. */
     toolResults?: number;
 }
+/**
+ * What a host's design system sets on the panel (`ChatPanelProps.theme`):
+ * CSS values, each the `--filigran-chat-*` variable named beside it.
+ */
+interface ChatPanelTheme {
+    /** The panel's background inline and fullscreen (`--filigran-chat-surface`). */
+    surface?: string;
+    /** The panel's background as a sidebar or floating card, and its dialogs' (`--filigran-chat-surface-raised`). */
+    surfaceRaised?: string;
+    /** Cards, search boxes, a table's or a code block's header: a shade off the surface (`--filigran-chat-surface-subtle`). */
+    surfaceSubtle?: string;
+    /** A row or a button under the pointer (`--filigran-chat-surface-hover`). */
+    surfaceHover?: string;
+    /** A text field: the composer (no fill unless set), a rename field, the feedback and approval comments (`--filigran-chat-input-surface`). */
+    inputSurface?: string;
+    /** The header's background, a colour or an image; `none` for the surface alone (`--filigran-chat-header-background`). */
+    headerBackground?: string;
+    /** Text (`--filigran-chat-text`). */
+    text?: string;
+    /** Faint text: times, labels, hints, placeholders (`--filigran-chat-text-muted`). */
+    textMuted?: string;
+    /** Secondary text: table cells, chips, descriptions, notices (`--filigran-chat-text-secondary`). */
+    textSecondary?: string;
+    /** Dividers, outlines, a gauge's track and the loading skeleton (`--filigran-chat-border`). */
+    border?: string;
+    /** The size of an answer's prose, its headings in proportion, and of a user's message unless `userTextSize` (`--filigran-chat-text-size`). */
+    textSize?: string;
+    /** A user's message: background, text, corners, padding and size (`--filigran-chat-user-*`). */
+    userBackground?: string;
+    userText?: string;
+    userRadius?: string;
+    userPadding?: string;
+    userTextSize?: string;
+    /** Code: its font, size and background (`--filigran-chat-font-mono`, `-code-size`, `-code-surface`). */
+    fontMono?: string;
+    codeSize?: string;
+    codeSurface?: string;
+}
 interface ChatPanelProps {
     mode: ChatPanelMode;
     /** Shows the close button; inline mode has none. */
@@ -636,6 +674,13 @@ interface ChatPanelProps {
     renderWaitingPanel?: () => React.ReactNode;
     /** Font of the panel's text; the package's own otherwise. */
     fontFamily?: string;
+    /**
+     * The host's colours, type and shapes, as CSS values (a host's own
+     * variables, `var(--x)`, follow its light and dark modes); each one unset
+     * keeps the panel's own. The same `--filigran-chat-*` variables can be set
+     * in CSS on an ancestor instead.
+     */
+    theme?: ChatPanelTheme;
     /**
      * Called once, when the panel has chosen its agent and read back the
      * conversation on screen. Calls made through the handle before then wait
@@ -1150,4 +1195,4 @@ interface TransferredAgent {
 declare const voiceCallSupported: () => boolean;
 
 export { ChatPanel, ChatToggleButton, voiceCallSupported };
-export type { AgentStatusState, ApiEndpoints, BackendType, ChatAnsweredBy, ChatArtifact, ChatArtifactKind, ChatAttachment, ChatCodeBlockContext, ChatCodeBlockRenderer, ChatContextBreakdown, ChatContextUsage, ChatConversationRef, ChatConversationReferenceCandidate, ChatConversationSummary, ChatFile, ChatHeldOutcome, ChatMarkerContext, ChatMarkerRenderer, ChatMessage, ChatMessagePersistedFeedback, ChatMessageSlotContext, ChatMode, ChatPanelHandle, ChatPanelMode, ChatPanelProps, ChatPromptTemplate, ChatQuotaStatus, ChatSendDecision, ChatSendDraft, ChatSendOptions, ChatSendOutcome, ChatStreamEventInfo, ChatToggleButtonProps, ChatTurnEnd, ChatTurnOutcome, ChatWorkspace, MessageFeedback, ToolApprovalDecision, ToolApprovalProposal, ToolApprovalVerdict, TransferredAgent, Translate, XtmAgent };
+export type { AgentStatusState, ApiEndpoints, BackendType, ChatAnsweredBy, ChatArtifact, ChatArtifactKind, ChatAttachment, ChatCodeBlockContext, ChatCodeBlockRenderer, ChatContextBreakdown, ChatContextUsage, ChatConversationRef, ChatConversationReferenceCandidate, ChatConversationSummary, ChatFile, ChatHeldOutcome, ChatMarkerContext, ChatMarkerRenderer, ChatMessage, ChatMessagePersistedFeedback, ChatMessageSlotContext, ChatMode, ChatPanelHandle, ChatPanelMode, ChatPanelProps, ChatPanelTheme, ChatPromptTemplate, ChatQuotaStatus, ChatSendDecision, ChatSendDraft, ChatSendOptions, ChatSendOutcome, ChatStreamEventInfo, ChatToggleButtonProps, ChatTurnEnd, ChatTurnOutcome, ChatWorkspace, MessageFeedback, ToolApprovalDecision, ToolApprovalProposal, ToolApprovalVerdict, TransferredAgent, Translate, XtmAgent };